<template>
  <div>
    <!-- 工具栏 -->
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :default-config="toolbarConfig"
    />
    <!-- 编辑器 -->
    <Editor
      v-model="editorContent"
      style="height: 400px; overflow-y: hidden; border: 1px solid #ccc"
      :default-config="editorConfig"
      @onCreated="onCreated"
    />
  </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 用这个时候先装 yarn add @wangeditor/editor   yarn add @wangeditor/editor-for-vue

import store from "@/store";
export default {
  name: "wang-editor",
  components: { Editor, Toolbar },
  props: {
    defaultValue: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    editorContent: {
      deep: true,
      immediate: true,
      handler(val) {
        this.$emit("change", val);
        this.$emit("input", val);
      },
    },
    defaultValue: {
      deep: true,
      immediate: true,
      handler(val) {
        this.editorContent = val;
      },
    },
    disabled: {
      immediate: true,
      handler(val) {
        this.editorConfig.readOnly = val;
      },
    },
  },
  mounted() {
  },
  data() {
    return {
      // 富文本编辑器
      editor: null,
      editorContent: "", // 编辑器内容
      toolbarConfig: {
        excludeKeys: ["group-video"],
      },
      editorConfig: {
        readOnly: false,
        placeholder: "请输入正文...",
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          uploadImage: {
            server: process.env.VUE_APP_BASE_API + "/file/upload",
            fieldName: "file",
            headers: { Authorization: "Bearer " + store.getters.token },
            allowedFileTypes: ["image/*"],
            // 自定义插入图片
            customInsert(res, insertFn) {
              let url = `${process.env.VUE_APP_BASE_API}/file/getFile/${res.data.bucketName}/${res.data.name}`;
              insertFn(url, res.data.originalFileName, url);
            },
          },
        },
      },
    };
  },
  methods: {
    // 创建编辑器
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
  },
};
</script>

<style scoped lang="scss">
// .w-e-bar-item button .title { 
//   margin-top: 30px !important;
// }
</style>